<template>
    <div class="form-box">
        <el-button type="primary" @click="toLoginComponent" style="margin-right: 280px" plain><=返回登录</el-button>
        <h3>修改个人信息表单</h3>
        <el-form ref="form" v-bind:model="form" v-bind:rules="rules" label-width="100px">
            <el-form-item label="学工号" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="原密码" prop="password">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input v-model="form.newPassword"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="password">
                <el-input v-model="form.confirmPassword"></el-input>
            </el-form-item>
            <el-form-item label="新手机号码" prop="telephoneNumber">
                <el-input v-model="form.telephoneNumber"></el-input>
            </el-form-item>
            <el-form-item class="flex-btn">
                <el-button type="primary" @click="onSubmit('form')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "modifyPersonalInformation",
    data() {
        return {
            form: {
                username:'',
                password:'',
                newPassword:'',
                confirmPassword:'',
                telephoneNumber:''
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur'}
                ],
                password:[
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 3, max: 20, message: '密码长度在 3 到 20 个字符', trigger: 'blur'}
                ],
                telephoneNumber:[
                    {required: true, message: '请输入手机号码', trigger: 'blur'},
                    {min: 11, max: 11, message: '11位手机号码', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        onSubmit:function (formName){
            var vm = this;
            this.$refs[formName].validate((valid) => {
                if (valid && vm.form.newPassword===vm.form.confirmPassword) {
                    console.log(vm.form);
                    vm.axios({
                        url: '/myapi/user/modifyPersonalInformation',
                        method: 'post',
                        //使用data是body传参，使用params是query传参
                        data:{
                            username:vm.form.username,
                            password:vm.form.password,
                            newPassword:vm.form.newPassword,
                            confirmPassword:vm.form.confirmPassword,
                            telephoneNumber:vm.form.telephoneNumber
                        }
                    }).then(function (response) {
                        if(response.data.code===200){
                            vm.$message({
                                duration:600,
                                message: '修改成功!',
                                type: 'success'
                            });
                            //路由至登录页面
                            vm.$router.push("/")
                        }
                        else if(response.data.code===999 && response.data.message==="用户不存在或账户被锁定"){
                            vm.$message.error('账户不存在或被锁定');
                        }
                        else if(response.data.code===999 && response.data.message==="密码错误或数据格式错误"){
                            vm.$message.error('密码错误或数据格式错误');
                        }
                        else if(response.data.code===999 && response.data.message==="手机号码重复"){
                            vm.$message.error('手机号码已存在，请更换');
                        }
                    });
                } else {
                    console.log('error submit!!');
                    this.$message.error('格式不正确或两次密码不相同');
                    return false;
                }
            });
        }
        ,toLoginComponent:function () {
            this.$router.push("/")
        }
    }
}
</script>

<style scoped>
.form-box{
    width: 600px;
    height: 750px;
    margin: 50px auto;
    padding: 10px 50px 20px 20px;

}
.flex-btn{
    float: left;
}
</style>
